<template>
<view>
		<view class="head">
			<navigator @click="gotoarrow" class="return-arrow">
				<image class="return-img" src="../../../static/arrow.png"></image>
			</navigator>
			<view class="service-list">到店数据</view>
		</view>
	<view class="page">
		<view class="all-date">
		     <button class="all-date" type="primary" @click="onShowDatePicker('range')">{{range[0]}} - {{range[1]}}</button>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			<!--<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>-->
		</view> 
		<view class="statistical-zon">
			<view class="statistical-data">
				<text>{{add_member_count}}</text>
				<view>新增会员数</view>
			</view>
			<view class="statistical-data">
				<text>{{order_count}}</text>
				<view>成交客户数</view>
			</view>
			<view class="statistical-data">
				<text>{{put_member_count}}</text>
				<view>开卡充值会员数</view>
			</view>
			<view class="statistical-data">
				<text>{{book_count}}</text>
				<view>预约单数</view>
			</view>
		</view>

	</view>
</view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default {

	components: {
	    MxDatePicker
	},
	data() {
	    return {
	        showPicker: false,
	        date: '2019/01/01',
	        time: '15:00:12',
	        datetime: '2019/01/01 15:00:12',
	        range: ['2019/01/01','2019/01/06'],
	        rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
	        type: 'rangetime',
	        value: '',
			book_count: 0,//预约单数
			put_member_count: 0,//开卡充值会员数
			order_count: 0,//成交客户数
			add_member_count: 0,//新增会员数
	    }
	},
	onLoad(){
		if(uni.getStorageSync('admin_id')=="" || uni.getStorageSync('admin_id')==undefined){
			uni.redirectTo({
				url:'/pages/ucenter/ucenter'
			});
			
		}
		var dayStart=this.getDate('date');
		var dayEnd=this.getDate('date');
		this.getData(dayStart,dayEnd);
	},
	methods:{
		gotoarrow(){
			this.$router.go(-1)
		},getDate(type){

		   var myDate = new Date();

			//获取当前年
		   var year = myDate.getFullYear();

		   //获取当前月
		   var month = myDate.getMonth() + 1;

			//获取当前日
			var date = myDate.getDate();
			var h = myDate.getHours(); //获取当前小时数(0-23)
			var m = myDate.getMinutes(); //获取当前分钟数(0-59)
			var s = myDate.getSeconds();

		   //获取当前时间
			if(type=="date"){
				var now = year + '-' + this.conver(month) + "-" + this.conver(date);
			}else{
				var now = year + '-' + this.conver(month) + "-" + this.conver(date) + " " + this.conver(h) + ':' + this.conver(m) + ":" + this.conver(s);
			}
		   return now;	
		},
		//日期时间处理
		conver(s) {
		return s < 10 ? '0' + s : s;
		},
		onShowDatePicker(type){//显示
		    this.type = type;
		    this.showPicker = true;
		    this.value = this[type];
		},
		onSelected(e) {//选择
		    this.showPicker = false;
		    if(e) {
		        this[this.type] = e.value; 
		        //选择的值
		        console.log('value => '+ e.value);
		        //原始的Date对象
		        console.log('date => ' + e.date);
		    }
		},
		getData(dayStart,dayEnd){
			
			uni.request({
				url: uni.getStorageSync('api_url')+'/statistics/getObjInfo?scKey='+uni.getStorageSync('shop_id')+'&sdDay='+dayStart+'&sdObjId=dde91dc08a8011e99741b7725e6fc5e9',
				method: 'get',
				header:{'content-type': 'application/x-www-form-urlencoded'},
				success: (result) => {
					 console.log(result)
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg,
							icon:'none'
						});
						
					}else{
						const data=result.data.data;
						data.forEach((rst) => {
							if(rst.smMonth!=undefined && rst.smMonth!=""){
								if(rst.smName=='flowAccount'){
									this.flowAccount="￥"+rst.smValue.toFixed(2);
								}else if(rst.smName=='cost'){
									this.cost="￥"+rst.smValue.toFixed(2);
								}else if(rst.smName=='profit'){
									this.profit="￥"+rst.smValue.toFixed(2);
								}
							}
						});
					}	
				}
			});
		}
	},
}

</script>

<style>
	    button{
	    margin: 20upx;
	    font-size: 28upx;
	}
	.all-date{
    color: #000;
    background-color: #ffffff;
	margin:0;
	font-size: 14px;
	}
	
	.head{
		width: 100%;
		background-color: #ffffff;
		text-align: center;
		position: relative;
	}
	.statistical-zon{
		width: 100%;
		height: 8.2rem;
		border-radius: 5px;
		background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
		margin-bottom: 1rem;
	}
	.statistical{
		width: 100%;
		height:10rem;
		border-radius:5px;
		background-color: #ffffff;
		margin-bottom: 1rem;
	}
	.statistical-title{
		width: 100%;
		height:2rem;
		border-radius:5px 5px 0 0 ;
		background-color:#e6e6e6;
	}
	.statistical-data{
	    width: 50%;
		margin-top: 1.3rem;
		font-size:14px;
		text-align: center;
		float: left;
	}
	.arrows{
		float: right;
		margin-top:0.25rem;
	}
	.data-title{
	    float: left;
	    margin: 5px 0 0 15px;
		}
</style>
